<template>
  <div class="control">
    <div class="header">
      <div class="background"></div>
      <span class="text">色谱设置</span>
    </div>
    <div class="content">
      <div class="row">
        <div class="title title1">数值样式</div>
        <div class="container container1">
          <div class="radio">
            <input
              type="radio"
              name="a"
              id="a1"
              value="caliper"
              checked
              @click="handleNumStyleChange"
            />
            <label for="a1"></label>
            <span>卡尺式</span>
          </div>
          <div class="radio">
            <input type="radio" name="a" id="a2" value="center" @click="handleNumStyleChange" />
            <label for="a2"></label>
            <span>居中式</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="title">排列样式</div>
        <div class="container">
          <div class="container_row">
            <div class="radio">
              <input
                type="radio"
                name="b"
                id="b1"
                value="vertical"
                checked
                @click="handleArrayStyleChange"
              />
              <label for="b1"></label>
              <span>竖排</span>
            </div>
            <div class="btnRadio">
              <span>数值在</span>
              <el-radio-group v-model="radio1" size="mini" @change="handleNumPosition_vert">
                <el-radio-button label="左"></el-radio-button>
                <el-radio-button label="右"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="container_row">
            <div class="radio">
              <input
                type="radio"
                name="b"
                id="b2"
                value="horizontal"
                @click="handleArrayStyleChange"
              />
              <label for="b2"></label>
              <span>横排</span>
            </div>
            <div class="btnRadio">
              <span>数值在</span>
              <el-radio-group v-model="radio2" size="mini" @change="handleNumPosition_hori">
                <el-radio-button label="上"></el-radio-button>
                <el-radio-button label="下"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="title">单色块的长宽</div>
        <div class="container">
          <div class="width">
            <label for="width" class="widthLabel">长</label>
            <input
              type="text"
              name="width"
              value="20px"
              class="widthInput"
              @change="handleWidthChange"
            />
          </div>
          <div class="width">
            <label for="height" class="widthLabel">宽</label>
            <input
              type="text"
              name="height"
              value="20px"
              class="widthInput"
              @change="handleHeightChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data: () => {
    return {
      radio1: "左",
      radio2: "上"
    };
  },
  mounted() {
    // console.log(this);
  },
  methods: {
    ...mapMutations([
      "changeNumStyle",
      "changeArrayStyle",
      "changeNumPosition_vert",
      "changeNumPosition_hori",
      "changeWidth",
      "changeHeight"
    ]),
    handleNumStyleChange(e) {
      const oldVal = this.$store.state.numStyle;
      const val = e.target.value;
      if (oldVal === val) return;
      this.changeNumStyle(val);
      console.log(this.$store.state.numStyle);
    },
    handleArrayStyleChange(e) {
      const oldVal = this.$store.state.arrayStyle;
      const val = e.target.value;
      if (oldVal === val) return;
      this.changeArrayStyle(val);
      console.log(this.$store.state.arrayStyle);
    },
    handleNumPosition_vert(e) {
      console.log(e);
      let item = "";
      switch (e) {
        case "左":
          item = "left";
          break;
        case "右":
          item = "right";
          break;
      }
      this.changeNumPosition_vert(item);
      const oldVal = this.$store.state.arrayStyle;
      if (oldVal !== "vertical") return;
    },
    handleNumPosition_hori(e) {
      console.log(e);
      let item = "";
      switch (e) {
        case "上":
          item = "top";
          break;
        case "下":
          item = "bottom";
          break;
      }
      this.changeNumPosition_hori(item);
      const oldVal = this.$store.state.arrayStyle;
      if (oldVal !== "horizontal") return;
    },
    handleWidthChange(e) {
      const val = parseInt(e.target.value);
      if (!val || val <= 0) {
        alert("输入的值不能为空或者负数");
        return;
      }
      this.changeWidth(val);
    },
    handleHeightChange(e) {
      const val = parseInt(e.target.value);
      this.changeHeight(val);
    }
  }
};
</script>

<style scoped>
.control {
  display: inline-block;
  width: 265px;
  height: 217px;
  background-color: #f8feff;
  box-shadow: 0px 6px 23px 1px rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  margin: 15px 70px 0 14px;
}
.header {
  width: 100%;
  height: 33px;
  background-color: #e6f4f7;
  border-radius: 2px;
}
.header .background {
  float: left;
  width: 70px;
  height: 33px;
  background-color: #38a7f0;
  position: relative;
}
.header .background::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 4px solid transparent;
  border-left: 7px solid #38a7f0;
  border-bottom: 4px solid transparent;
}
.header .text {
  width: 56px;
  height: 14px;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #ffffff;
  position: absolute;
  transform: translateX(-65px);
}
.content {
  height: 184px;
  background-color: #f8feff;
  padding: 0 8px;
}

.row {
  border-bottom: 1px dashed #656565;
}
.row .title {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 25px;
  letter-spacing: 0px;
  color: #656565;
}
.row .title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 12px;
  background-color: #f89751;
  border-radius: 1px;
  margin-right: 7px;
  transform: translateY(1px);
}
.row .container {
  padding-left: 9px;
}
.row .container .radio {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #656565;
}
.title1 {
  display: inline-block;
}
.container1 {
  display: inline-block;
}
.btnRadio {
  display: inline-block;
}

.content .row:last-child {
  border: none;
}

/* radio start */
.radio {
  position: relative;
  line-height: 30px;
  display: inline-block;
}
.radio input[type="radio"] {
  width: 12px;
  height: 12px;
  opacity: 0;
}
.radio label {
  position: absolute;
  left: 5px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #999;
  cursor: pointer;
}

.radio input:checked + label {
  background-color: #38a7f0;
  border: 1px solid #38a7f0;
}
/*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
.radio input:checked + label::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 6px;
  top: 1px;
  left: 4px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
/* radio end */

/* btnRadio start */
.btnRadio {
  margin-left: 20px;
}
.btnRadio span {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #656565;
}
.btnRadio /deep/ .el-radio-button--mini .el-radio-button__inner {
  padding: 2px 5px;
  font-size: 12px;
  /* background-color: #38a7f0; */
  border-radius: 2px 0 0 2px;
  color: #7e7e7e;
  border: solid 1px #47a1dd;
}
.btnRadio /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 2px 2px 0;
}

.btnRadio
  /deep/
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  background-color: #38a7f0;
  color: #fff;
}

.width {
  display: inline;
  margin-right: 18px;
}
.widthLabel {
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #656565;
}
.widthInput {
  width: 37px;
  height: 20px;
  background-color: #ffffff;
  border: solid 1px #c2c0c0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 30px;
  letter-spacing: 0px;
  color: #656565;
}
</style>